<template>
    <div class="userInfo">
        <div class="avatar">
            <img :src="userInfo.avatarUrl" alt="">
        </div>
        <div class="phone">
            <b>手机号：</b><span>{{userInfo.phone}}</span>
        </div>
        <div class="nickname">
            <b>昵称：</b> <span>{{userInfo.nickname}}</span>
        </div>
        <div class="score">
            <b>积分：</b> <span>{{userInfo.scores}}</span>
        </div>
        <div class="loginOut">
            <button @click="handleLoginout">退出登录</button>
        </div>
    </div>
</template>

<script>
import { getUserInfo } from '../api/user'
export default {
    name: "",
    data() {
        return {
            userInfo: {}
        }
    },
    methods: {
        handleLoginout() {
            localStorage.clear()
            this.userInfo={}
            this.$router.push('/')
        }
    },
    async created() {
        let res= await getUserInfo()
        if ( res.userInfo !== null && localStorage.getItem('vuex')) {
            this.userInfo = res.userInfo
        } else {
            this.$router.push('/login')
        }
    }
}
</script>

<style lang="less" scoped>
.userInfo{
    margin-top: 50px;
    padding: 10px;
    height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    .avatar{
        display: flex;
        justify-content: center;
        img {
                width: 200px;
                height: 200px;
                border-radius: 100px;
                border: 3px solid #999;
            }
    }
    .phone ,.nickname,.score{
        width: 300px;
        b{
            display: inline-block;
            width: 40%;
            font-size: 20px;
            margin-left: 30px;
        }
        span{
            width: 60%;
        }
    }
}
</style>